import React from 'react'

class BackgroundPropertySettingRole extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      data: {}
    }
  }

  componentWillReceiveProps(props) {
    this.setState({
      data: props.data
    })
  }



  onDataSubmit() {
    // var keyWord = $(this.refs.messageKeyWord).val(),
    //     id = $(this.refs.messageId).val() || (new Date().getTime());
    // var data = {
    //   id: id,
    //   keyWord: keyWord
    // }
    // if (this.props.isEdit) {
    //   this.props.onDataUpdate(data)
    // }else {
    //   this.props.onDataCreate(data)
    // }
    var arr = new Array();
   $('#Property').val($('input[type=checkbox]:checked')
      .map(function(){
            // arr =  this.value;
            arr.push(this.value);
            return this.value})
        .get().join(','));
     
    $('#role-name').attr("value",arr);
    // $('#bakckgound-propertyId').attr("value",propertyName);

    $('input:checkbox').each(function () {
            $(this).attr('checked',false);
    });
  }
  onCancelClicked(){
    $('input:checkbox').each(function () {
            $(this).attr('checked',false);
    });

  }
  onChange(event, key) {
    var value = $(event.target).val();
    var data = this.state.data;
    data[key] = value;
    this.setState({
      data: data
    })
  }

  render() {
    var self = this;
    return (
      <div className="modal fade" id="DemoSettingEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 className="modal-title" id="demo-modal-label">添加角色名</h4>
            </div>
            <div className="modal-body">
              <div className="form-group">
                {// <input ref="messageKeyWord" type="text" className="form-control"
                //         id="message-keyWord" placeholder="" value={self.state.data.keyWord}
                //         onChange={(event)=>this.onChange(event, "keyWord")}/>
              }
                <div className="message-eventkey-list">
                  <table className="table table-bordered">
                  <tbody>
                    <tr >
                      <th><input name="Property" type="checkbox" value="角色1" id="role"/>&nbsp;&nbsp;角色1 </th>
                    </tr>
                    <tr >
                      <th><input name="Property" type="checkbox" value="角色2" id="role"/>&nbsp;&nbsp;角色2 </th>
                    </tr>
                    <tr >
                      <th><input name="Property" type="checkbox" value="角色3" id="role"/>&nbsp;&nbsp;角色3 </th>
                    </tr>
                    <tr >
                      <th><input name="Property" type="checkbox" value="角色4" id="role"/>&nbsp;&nbsp;角色4 </th>
                    </tr>
                  </tbody>
                  </table>
                </div>
              </div>
              <input ref="demoId" value={self.props.data.id} hidden/>

            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-default" data-dismiss="modal" onClick={(event)=> this.onCancelClicked() }>取消</button>
              <button type="button" className="btn btn-primary" data-dismiss="modal"
                      onClick={(event)=> this.onDataSubmit() }>确定</button>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default BackgroundPropertySettingRole
